<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>   
        
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String basePath = request.getContextPath();
%>
<html>
	<head>
		<title>个人主页</title>
			<meta name="keywords" content="个人主页" />
			<meta name="description" content="蓝色html5响应式个人博客网站单页模板下载。" />


        	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
			<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />

        	<!-- CSS | animate -->
        	<!-- Credits: http://daneden.github.io/animate.css/ -->
        	<link rel="stylesheet" type="text/css" href="css/animate.min.css" />

        	<!-- CSS | Normalize -->
        	<!-- Credits: http://manos.malihu.gr/jquery-custom-content-scroller -->
        	<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css" />
       	
        	<!-- CSS | Colors -->
        	<link rel="stylesheet" type="text/css" href="css/colors/DarkBlue.css" id="colors-style" />
        	<link rel="stylesheet" type="text/css" href="css/switcher.css" />
        
        	<!-- CSS | Style -->
        	<!-- Credits: http://themeforest.net/user/FlexyCodes -->
        	<link rel="stylesheet" type="text/css" href="css/main.css" />

        	<!-- CSS | prettyPhoto -->
        	<!-- Credits: http://www.no-margin-for-errors.com/ -->
        	<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css"/> 
            
            <script src="js/jquery-1.11.1.min.js"></script>
            <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
            <script type="text/javascript" src="js/md5.js"></script>
            
			<script type="application/x-javascript"> 
				addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 
        	</script>
			<!-- bootstrap -->
            <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all"/>
			<!-- //bootstrap -->
            
			<link href="css/dashboard.css" rel="stylesheet">
            
			<!-- Custom Theme files -->
			<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />

			<!--start-smoth-scrolling-->
            
			<!-- fonts -->
			<link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
			<link href='http://fonts.useso.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
            <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
			<!-- //fonts -->
            
            
            <style>
            @media only screen and (max-width : 991px){
                .resp-vtabs .resp-tabs-container {
                    margin-left: 13px;
                }
            }
			
			@media only screen and (min-width : 800px) and (max-width : 991px){
                .resp-vtabs .resp-tabs-container {
                    margin-left: 13px;
					width:89%;
                }
            }		

          </style>
	</head>
  <body>
  
  <script type="text/javascript">
	function timeStampToString(time){
		var datetime = new Date();
		datetime.setTime(time);
		var year = datetime.getFullYear();
		var month = datetime.getMonth()+1<10?"0"+(datetime.getMonth()+1):datetime.getMonth()+1;
		var date = datetime.getDate()<10?"0"+datetime.getDate():datetime.getDate();
		// 这个hour比数据库里的时间多8个小时
		// 是时区的问题，要改一下数据库的设置
		// 前面获取评论时间那里也要改一下
		var hour = datetime.getHours()<10?"0"+datetime.getHours():datetime.getHours();
		var minute = datetime.getMinutes<10?"0"+datetime.getMinutes():datetime.getMinutes();
		var second = datetime.getSeconds()<10?"0"+datetime.getSeconds():datetime.getSeconds();
		return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
	}
</script>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><h1><img src="images/logo.png" alt="" /></h1></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
			<div class="top-search">
				<form class="navbar-form navbar-right">
					<input type="text" class="form-control" placeholder="Search...">
					<input type="submit" value=" ">
				</form>
			</div>  
			<div class="header-top-right">
				<!--  Object obj = session.getAttribute("user");> -->
					<% if (session.getAttribute("user") != null) {%>				  
    						  <div class="header-right">
    							<li class="dropdown">
    									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
    		                            <img src="${sessionScope.user.header}" style="width:50px;height:50px;border-radius:50px">
    		                                <span class="username" ><font size="+1">您好，${sessionScope.user.name}</font></span>
    		                                <span id="userID" style="display:none">${sessionScope.user.userID }</span>
    									<strong class="caret"></strong>
    									</a>
    									<ul class="dropdown-menu">
    										<li><a href="#"><i class="icon-user"></i> 个人主页</a></li>
    										<li class="divider"></li>
    										<li><a href="logout"><i class="icon-key"></i>注销</a></li>
    									</ul>
    								</li>
    						</div>
								<% } else { %>
   							   	<div class="signin">
					<a href="#small-dialog3" class="play-icon popup-with-zoom-anim">注册</a>
					<span id="userID" style="display:none"></span>
					<!-- pop-up-box -->
									<script type="text/javascript" src="js/modernizr.custom.min.js"></script>    
									<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
									<link href="css/checkCode.css" rel="stylesheet" type="text/css" media="all"/>
									<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
									<script src="js/signValidation.js" type="text/javascript"></script>
						<!--			<script src="js/checkCode.js" type="text/javascript"></script>-->
									<!--//pop-up-box -->
									<div id="small-dialog3" class="mfp-hide">
										<h3>创建账户</h3>
										<div class="social-sits">
											<div class="facebook-button">
												<a href="#">QQ账号登录</a>
											</div>
											<div class="chrome-button">
												<a href="#">微信账号登录</a>
											</div>
											<div class="button-bottom">
												<p>已经有账号？ <a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a></p>
											</div>
										</div>
										<div class="signup">
										<script type="text/javascript" src="js/md5.js"></script>
												<script language="javascript">
												    function SubmitForm() {
												    
												        document.getElementById("pwd").value = hex_md5(document.getElementById("pwd").value);
												        //document.form1.submit
												    }
												</script>
										
											<form name="form1" method="post" action="register">
												<input type="text" class="email" id="name-vali" name="name" placeholder="昵称" required="required" title="输入昵称"/>
												<p id="nickname.info" style="color:red"></p>
												<input type="text" class="email" style="width: 60%;" id="txt-code" maxlength="6" placeholder="验证码" required="required" title="输入验证码"/>
												<p id="txt-code.info" style="color:red"></p>
												<canvas width="30%" style=" float: right;" id="codeCanvas" onclick="createCode()">对不起，当前浏览器不支持此验证码</canvas>
												<input type="text" class="email" id="email-vali"placeholder="Email" name="email" required="required" title="输入有效的邮箱地址"/>
												<p id="email-vali.info" style="color:red"></p>
												<input type="text" class="email" style="width:60%;float: left;" id="email-code" placeholder="邮箱验证" required="required" title="输入邮箱验证码"/>

												<!--<input type="button" value="发送验证码"/>-->
												<button type="button" style="float: right;width: 30%;height: 42px;">发送验证码</button>
												<input type="password" id="pwd" name="pwd" placeholder="密码" required="required" title="至少6位，必须包括大小写字符、数字" autocomplete="off" />
												<p id="pwd.info" style="color:red"></p>
												<input type="password" id="pwd-vali" placeholder="确认密码" required="required" title="再次输入以确认密码" autocomplete="off"/>
												<p id="pwd-vali.info" style="color:red"></p>
												<input type="submit" class="signup-vali" value="注册" onclick="SubmitForm()"/>
											</form>
										</div>
										<div class="clearfix"> </div>
									</div>	
									<div id="small-dialog7" class="mfp-hide">
										<h3>创建账户</h3>
										<div class="social-sits">
											<div class="facebook-button">
												<a href="#">QQ账号登录</a>
											</div>
											<div class="chrome-button">
												<a href="#">微信账号登录</a>
											</div>
											<div class="button-bottom">
												<p>已经有账号？ <a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a></p>
											</div>
										</div>
										<div class="signup">
											<form action="upload.html">
												<input type="text" name="email-login1" class="email" id="email-login1" placeholder="Email" required="required" title="输入有效的邮箱地址"/>
												<p id="email-login1.info" style="color:red"></p>
												<input type="password" name="pwd-login1" id="pwd-login1" placeholder="密码" required="required" title="至少6个字符" autocomplete="off" />
												<p id="pwd-login1.info" style="color:red"></p>
												<input type="submit"  value="Sign In"/>
											</form>
										</div>
										<div class="clearfix"> </div>
									</div>		
									<div id="small-dialog4" class="mfp-hide">
										<h3>Feedback</h3> 
										<div class="feedback-grids">
											<div class="feedback-grid">
												<p>Suspendisse tristique magna ut urna pellentesque, ut egestas velit faucibus. Nullam mattis lectus ullamcorper dui dignissim, sit amet egestas orci ullamcorper.</p>
											</div>
											<div class="button-bottom">
												<p><a href="#small-dialog" class="play-icon popup-with-zoom-anim">Sign in</a> to get started.</p>
											</div>
										</div>
									</div>
									<div id="small-dialog5" class="mfp-hide">
										<h3>Help</h3> 
											<div class="help-grid">
												<p>Suspendisse tristique magna ut urna pellentesque, ut egestas velit faucibus. Nullam mattis lectus ullamcorper dui dignissim, sit amet egestas orci ullamcorper.</p>
											</div>
											<div class="help-grids">
												<div class="help-button-bottom">
													<p><a href="#small-dialog4" class="play-icon popup-with-zoom-anim">Feedback</a></p>
												</div>
												<div class="help-button-bottom">
													<p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Lorem ipsum dolor sit amet</a></p>
												</div>
												<div class="help-button-bottom">
													<p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Nunc vitae rutrum enim</a></p>
												</div>
												<div class="help-button-bottom">
													<p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Mauris at volutpat leo</a></p>
												</div>
												<div class="help-button-bottom">
													<p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Mauris vehicula rutrum velit</a></p>
												</div>
												<div class="help-button-bottom">
													<p><a href="#small-dialog6" class="play-icon popup-with-zoom-anim">Aliquam eget ante non orci fac</a></p>
												</div>
											</div>
									</div>
									<div id="small-dialog6" class="mfp-hide">
										<div class="video-information-text">
											<h4>Video information & settings</h4>
											<p>Suspendisse tristique magna ut urna pellentesque, ut egestas velit faucibus. Nullam mattis lectus ullamcorper dui dignissim, sit amet egestas orci ullamcorper.</p>
											<ol>
												<li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
												<li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
												<li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
												<li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
												<li>Nunc vitae rutrum enim. Mauris at volutpat leo. Vivamus dapibus mi ut elit fermentum tincidunt.</li>
											</ol>
										</div>
									</div>
									<script>
											$(document).ready(function() {
											$('.popup-with-zoom-anim').magnificPopup({
												type: 'inline',
												fixedContentPos: false,
												fixedBgPos: true,
												overflowY: 'auto',
												closeBtnInside: true,
												preloader: false,
												midClick: true,
												removalDelay: 300,
												mainClass: 'my-mfp-zoom-in'
											});
																											
											});
									</script>	
				</div>
								<div class="signin">
					<a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a>
					<div id="small-dialog" class="mfp-hide">
						<h3>登录</h3>
						<div class="social-sits">
							<div class="facebook-button">
								<a href="#">QQ账号登录</a>
							</div>
							<div class="chrome-button">
								<a href="#">微信账号登录</a>
							</div>
							<div class="button-bottom">
								<p>还没有账号？ <a href="#small-dialog3" class="play-icon popup-with-zoom-anim">注册</a></p>
							</div>
						</div>
						<div class="signup">
							<script type="text/javascript" src="js/md5.js"></script>
												<script language="javascript">
												    function submitForm() {
												    
												        document.getElementById("pwd-login2").value = hex_md5(document.getElementById("pwd-login2").value);
												        //document.form1.submit
												    }
												</script>
							<form action="doLogin" method="get">
								<input type="text" class="email" id="account-login" name="name"  placeholder="邮箱/手机" required="required" />
								<p id="account-login.info" style="color:red"></p>
								<input type="password" id="pwd-login2" name="pwd" placeholder="密码" required="required" autocomplete="off" />
								<p id="pwd-login2.info" style="color:red"></p>
								<input type="submit" id="login2" value="登录" onclick="submitForm()"/>
							</form>
							<div class="forgot">
								<a href="#">忘记密码？</a>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
									<% } %>
				<div class="clearfix"> </div>
			</div>
        </div>
		<div class="clearfix"> </div>
      </div>
    </nav>
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
			<div class="top-navigation">
				<div class="t-menu">MENU</div>
				<div class="t-img">
					<img src="images/lines.png" alt="" />
				</div>
				<div class="clearfix"> </div>
			</div>
				<div class="drop-navigation drop-navigation">
				  <ul class="nav nav-sidebar">
					<li class="active"><a href="loginuser" class="home-icon"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>首页</a></li>
					
					<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电影" class="menu1"><span class="glyphicon glyphicon-film" aria-hidden="true"></span>电影<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
						<ul class="cl-effect-2">
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电影#">浪漫</a></li>                                             
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电影#scare">惊悚</a></li>
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电影#lunli">伦理</a></li> 
						</ul>
						<!-- script-for-menu -->
						<script>
							$( "li a.menu1" ).click(function() {
							$( "ul.cl-effect-2" ).slideToggle( 300, function() {
							// Animation complete.
							});
							});
						</script>
					<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电视剧" class="menu"><span class="glyphicon glyphicon-film glyphicon-king" aria-hidden="true"></span>电视剧<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
						<ul class="cl-effect-1">
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电视剧#">校园</a></li>                                             
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电视剧#old">古装</a></li>
							<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=电视剧#family">家庭</a></li> 
						</ul>
						<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=生活" class="user-icon"><span class="glyphicon glyphicon-home glyphicon-blackboard" aria-hidden="true"></span>生活</a></li>
					<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=新闻" class="sub-icon"><span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"></span>新闻</a></li>
						<!-- script-for-menu -->
						<script>
							$( "li a.menu" ).click(function() {
							$( "ul.cl-effect-1" ).slideToggle( 300, function() {
							// Animation complete.
							});
							});
						</script>
					<li><a href="<%=basePath%>/showCategoryVideoList?categoryName=综艺" class="song-icon"><span class="glyphicon glyphicon-music" aria-hidden="true"></span>综艺</a></li>
				  </ul>
				  <!-- script-for-menu -->
						<script>
							$( ".top-navigation" ).click(function() {
							$( ".drop-navigation" ).slideToggle( 300, function() {
							// Animation complete.
							});
							});
						</script>
					<div class="side-bottom">
						<!--<div class="side-bottom-icons">
							<ul class="nav2">
								<li><a href="#" class="facebook"> </a></li>
								<li><a href="#" class="facebook twitter"> </a></li>
								<li><a href="#" class="facebook chrome"> </a></li>
								<li><a href="#" class="facebook dribbble"> </a></li>
							</ul>
						</div>-->
						<div class="copyright">
							<p>Copyright &copy; 2018.Team3 All rights reserved.Podcast <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">大学生播客</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">Team3</a></p>
						</div>
					</div>
				</div>
        </div>
        <div class="col-sm-9 col-md-10 main">

		<!-- 个人主页拼接部分 -->
	        <!-- .wrapper --> 
        <div class="wrapper" style="top: 326px; left: 230px;">

            <!--- .Content --> 
            <section class="tab-content">
                <div class="container">

                    <div class="row">

                        <div class="col-md-12">

                            <div class="row">   

                                <div class="col-md-12 flexy_content" style="padding-left: 0;padding-right: 0;">

                                    <!-- verticalTab menu 侧边菜单栏-->
                                    <div class="col-md-1" id="verticalTab">

                                        <ul class="resp-tabs-list">
                                            <li class="tabs-profile hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a profile" data-tab-name="profile">			
                                                <i class="fa fa-user icon_menu icon_menu_active"></i>
                                            </li>

                                            <li class="tabs-resume hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" data-tab-name="resume"> 
                                                <i class="fa fa-comments icon_menu"  id="commentIcon"></i>
                                            </li>

                                            <li class="tabs-portfolio hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" data-tab-name="portfolio">
                                                <i class="fa fa-folder icon_menu" id="favouriteIcon"></i>
                                            </li>

                                            <li class="tabs-blog hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" data-tab-name="blog">
                                                <i class="fa fa-caret-square-o-right icon_menu" id="vedioIcon"></i>
                                            </li>

                                            <li class="tabs-contact hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" data-tab-name="contact" style="margin-bottom: 48px !important;">  
                                                <i class="fa fa-plus icon_menu"></i> 
                                            </li>
                                        </ul>
                                        <!-- /resp-tabs-list -->

                                        <!-- resp-tabs-container --> 
                                        <div class="col-md-11 resp-tabs-container">

                                            <!-- profile -->
                                            <div id="profile" class="content_2">
                                                <!-- .title -->
												<h1 class="h-bloc">个人信息管理</h1>
													<div class="row top-p">
    													<div class="col-md-6 profile-l">
       														<!--About me-->
        															<div class="title_content">
            													<div class="text_content" id="titleUserName">${sessionScope.user.name}</div>
           														<div class="clear"></div>
        													</div>
		   													<ul class="about">
            													<li>
               														<i class="glyphicon glyphicon-user"></i>
                													<label>昵称</label>
                													<span class="value" id="userName">${sessionScope.user.name}</span>
                													<div class="clear"></div>
            													</li>
            													<li> 
                													<i class="glyphicon glyphicon-earphone"></i>
                													<label>手机</label>
                													<span class="value" id="userPhoneNum">${sessionScope.user.phoneNum}</span>
                													<div class="clear"></div>
           	 													</li>
            													<li>
                													<i class="glyphicon glyphicon-envelope"></i>
                													<label>邮箱</label>
                													<span class="value" id="userEmail">${sessionScope.user.email}</span>
                													<div class="clear"></div>
            													</li>
        													</ul>
                                                            <div class="userchange">
                                                            	<a class="download" style="margin-top:10px;margin-right:90px;" href="#">
            														<span data-hover="修改信息">修改信息</span>
        														</a>
                                                            </div>
    													</div>
    												<!-- End left-wrap -->

    													<div class="col-md-6 profile-r">
       														<div class="infoImage">
           														<img class="headerImage" id="headerImage" src="${sessionScope.user.header}" alt="" />                      
       														</div>
                                                            <form action="uploadHeader" id="updateHeader" method="post" enctype="multipart/form-data">
                                                            	<input type="file" name="header" id="header" style="display:none" onchange="headerFileImport();"/>
                                                            </form>
                                                        <a class="download" style="margin-top:15px;margin-right:200px;" href="#" id="aHeaderFile">
            												<span data-hover="修改头像">修改头像</span>
        												</a>
                                                         <script>
        													//点击导入按钮,使files触发点击事件,然后完成读取文件的操作
        													$("#aHeaderFile").click(function () {
            													$("#header").click();
        													})
        													function headerFileImport() {
        														var userID = document.getElementById("userID").innerHTML;
        														$.ajaxFileUpload({ 
        												            method:"POST",
        												            url:"uploadHeader?userID="+ userID,            //需要链接到服务器地址  
        												            secureuri:true,  
        												            fileElementId:'header',                        //文件选择框的id属性 
        												            dataType: 'JSON', 
        												            success: function(data){
        												            	var reg = /<pre.+?>(.+)<\/pre>/g;  
        												            	var result = data.match(reg);  
        												            	data = RegExp.$1;
        												            	var json = $.parseJSON(data);
        												            	
        												            	$('#headerImage').attr('src', json.srcPath);
        												      
        												            },error: function (data){
        												            	alert("上传失败");
        												            
        												            }  
        												        });
        													}
    													</script>        
    													</div>
												</div>
    											<div class="clear"></div>
                                            </div>
                                            <!-- End .profile -->

                                            <!-- .resume -->
                                            <div id="resume" class="content_2">
                                                <!-- .title -->
												<h1 class="h-bloc">发布的评论</h1> 
                      							<div style="clear: both"></div>  
                    							<!-- client reference -->
                    							<div class="row">
                        							<div class="col-md-12">   
                    									<div class="reference clearfix" id="comments"> 
                                         					<!-- .title_content -->
                            								<div class="title_content" style="margin-bottom:5px">
                                								<div class="text_content">评论1</div>
                                								<div class="clear"></div>
        													</div>
                            								<!-- End title_content -->
                                                            <div class="oneComment">
                                                           		<div class="commentContext">
																	<ul>
                                										<li class="clearfix">
                                    									<img src="images\img\left.png" class="img_reference" width="100" height="100" alt="">
                                    									<p>评论内容</p>
                                    									<span>本人昵称</span>
                                										</li>
                            										</ul>
                                                                   <div class="commentTime">
                                                                    	<p>评论时间</p>
                                                                    </div>
                                                            	</div>
                                                           		<div class="commentVedio">
                                                                	<img src="images\blog\blog.png" width="300" height="200"/>
                                                                     <div class="videoLabel">
                                                                        <span class="text-title">视频名称4</span><br>
                                                                        <span class="text-category">类型</span><br>
                                                                        <span class="text-category">发布者</span><br>
                                                                    </div>
                                                                </div>
 
                                                            </div>
                                                           <!-- .title_content -->
                            								<div class="title_content" style="margin-bottom:5px">
                                								<div class="text_content">评论2</div>
                                								<div class="clear"></div>
        													</div>
                            								<!-- End title_content -->
                                                            <div class="one comment">
                                                            	<div class="commentContext">
																	<ul>
                                										<li class="clearfix">
                                    									<img src="images\img\left.png" class="img_reference" width="100" height="100" alt="">
                                    									<p>评论内容</p>
                                    									<span>本人昵称</span>
                                										</li>
                            										</ul>
                                                                    <div class="commentTime">
                                                                    	<p>评论时间</p>
                                                                    </div>
                                                            	</div>
                                                           		<div class="commentObject">
                                                               		<ul>
                                										<li class="clearfix">
                                    									<img src="images\img\left.png" class="img_reference" width="100" height="100" alt="">
                                    									<p>评论内容</p>
                                    									<span>被评论者昵称</span>
                                										</li>
                            										</ul>
                                                                    <div class="commentTime">
                                                                    	<p>评论时间</p>
                                                                    </div>
                                                            	</div>
                                                            </div>
                    									</div>
                     								</div>
                         							<div style="clear: both"></div>   
												</div>
							         		</div>
                                        	<!-- End .resume -->

                                            <!-- .portfolio -->
                                            <div id="portfolio" class="content_2">
 												<!-- .title -->
                                                <h1 class="h-bloc">收藏夹</h1>

                                                <!-- .container-portfolio -->
                                                <div class="container-portfolio">

                                                    <!-- #filters 选择类别-->
                                                     <ul id="filters" class="clearfix">
                                         			    <li><span class="filter active" data-filter="1 2 3 4 5 6 7 8 9 10 11">所有视频</span></li>
                                                        <li><span class="filter" data-filter="1 2 3 4">电影</span></li>
                                                        <li><span class="filter" data-filter="5 6 7">电视剧</span></li>
                                                        <li><span class="filter" data-filter="8">教学</span></li>
                                                        <li><span class="filter" data-filter="9">生活</span></li>
                                                        <li><span class="filter" data-filter="10">新闻</span></li>
                                                        <li><span class="filter" data-filter="11">综艺</span></li>
                                                    </ul>
                                                    <!-- /#filters -->
                                    
                                                    <!-- #portfoliolist -->
                                                    <div id="portfoliolist">

                                                        <!-- 动态加载内容 -->

														<div class="clear"></div>
													</div>
                                                    <!-- #portfoliolist -->
                                                </div>
                                                <!-- End container-portfolio -->
                                            </div>
                                            <!-- End .portfolio -->

                                            <!-- .vedio -->
                                            <div id="blog" class="content_2">
                                                <h1 class="h-bloc">发布的视频</h1><br> 
												<div class="col-md-12">
    												<div class="row">
        												<!-- Page Blog -->
        												<div class="col-md-12" id="blog_page">
            											<!-- start Page Blog -->
            												<section class="vediosSection" id="blog-page">                                                           
                                                            
                                        <!-- 错位放置 -->                                                                      
                                                            
                						<!-- Post 1 -->	
                						<article id="post-1" class="blog-article">                    
                    						<div class="col-md-12">
                        						<div class="row">
                            						<div class="col-md-12 post_media">
                               							<div class="post-format-icon">
                                    						<a href="#" class="item-date"><span class="fa fa-caret-square-o-right"></span></a>
                                						</div>
                                						<div class="media">
                                    						<div class="item active">
                                                   			<img src="images/blog/blog-1.jpg" alt="" />
                                                    			<div class="carousel-caption">
                                                        			<h4>视频1</h4>
                                                    			</div>
                                                			</div>
                                                            <div class="vedioUploadTime">发表时间：2018-03-05 14:33:28</div>			
                                						</div>
                            						</div>
                       						 	</div>
                                             	<!-- End 视频区-->

                        						<div class="row">
                           							<div class="col-md-12 post_content">
                                						<div class="content post_format_standart">
                                        					<div class="title_content">
                                            					<div class="text_content"><a href="#post-1" class="read_more">视频标题</a></div>
                                            						<div class="clear"></div>
                                        						</div>
                                        						<ul class="info">
                                            						<li><i class="glyphicon glyphicon-comment"></i>评论数</li>
                                            						<li><i class="glyphicon glyphicon-play"></i>总时长</li>
                                            						<li><i class="glyphicon glyphicon-heart"></i>点赞数</li>
                                                                    <li><i class="glyphicon glyphicon-eye-open"></i>浏览量</li>
                                            						<li><i class="glyphicon glyphicon-align-left"></i>类型</li>
                                        						</ul>
                                        						<div class="blog-content">
                                            						<p><i class="fa fa-quote-left"></i>视频描述</p>
                                                                </div>
                                    						</div>
                                					<a href="#post-1" class="read_m pull-right">详情<i class='glyphicon glyphicon-chevron-right'></i></a>
                            							</div>
                        							</div>
                    							</div>
                							</article>
                						<!-- End Post 1 -->

                						<div class="clear"></div>

            												</section>
	          												<!-- End Page Blog -->                                                            
                                                             
            												<!-- Page Blog - Post 1 -->
            												<section id="post-1-page" class="content-post" style="display: none">
	               												<div class="row inner">
                    												<div class="col-md-12" style="width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;float: left;background: rgba(255, 255, 255, 0.8);padding-bottom: 15px;padding-top: 15px;">
										<!-- 错放位置 -->
                        				<article class="postPage">                                            
                                            <div class="row">
                            					<div class="col-md-12 post_media">
                               						<div class="post-format-icon">
                                    					<a href="#" class="item-date"><span class="fa fa-caret-square-o-right"></span></a>
                                					</div>
                                					<div class="media">
                                    					<div class="item active">
                                                   		<img src="images/blog/blog-1.jpg" alt="" />
                                                    		<div class="carousel-caption">
                                                        		<h4>视频1</h4>
                                                    		</div>
                                                		</div>			
                                					</div>
                            					</div>
                       						 </div>
    
                            				<div class="title_content">
                                				<div class="text_content">视频名字</div>
                                				<div class="clear"></div>
                            				</div>
                            				<p class="caps">视频描述</p>
						      				<div class="col-md-12 first">
                                				<div class="info">                              
                                    				<ul class="info-post">
                                        				<li><i class="glyphicon glyphicon-comment"></i>评论数</li>
                                            			<li><i class="glyphicon glyphicon-play"></i>总时长</li>
                                            			<li><i class="glyphicon glyphicon-heart"></i>点赞数</li>
                                            			<li><i class="glyphicon glyphicon-align-left"></i>类型</li>
                                    				</ul>
                               					 </div>
                                				 <div class="clear"></div>      
                                				 <div class="post_comments">
                                    			 	<div class="title_content">
                                        				<div class="text_content">视频评论</div>
                                        				<div class="clear"></div>
                                    				</div>
                                    				<div class="clear"></div>
                                                    <!-- .comments -->
                                    				<div class="comments">
                                        				<div class="comment">
                                            				<img src="http://placehold.it/100x100" width="100" height="100" alt="img" />
                                            				<div class="text">
                                                				<div class="name">评论者1<a class="reply" href="#">回复</a></div>
                                                				<div class="date">评论时间</div>
                                                				评论内容
                                            				</div>
                                           				 	<div class="comment sub">
                                                				<img src="http://placehold.it/100x100" width="100" height="100" alt="img" />
                                                				<div class="text">
                                                    				<div class="name">回复者1<a class="reply" href="#">回复</a></div>
                                                    				<div class="date">评论时间</div>
                                                    			评论内容
                                                				</div>
                                                				<div class="clear"></div>
                                            				</div>
                                            				<div class="clear"></div>
                                        				</div>
                                                        <!-- End comment1 -->
	                       								<div class="comment">
                                            				<img src="http://placehold.it/100x100" width="100" height="100" alt="img" />
                                            					<div class="text">
                                                					<div class="name">评论者2<a class="reply" href="#">回复</a></div>
                                                					<div class="date">评论时间</div>
                                                				评论内容
                                            					</div>
                                            					<div class="clear"></div>
                                        				</div>
                                                     	<!-- End comment2 -->
                                    				</div><!-- End comments -->
													<div class="clear"></div>                                         
                                				</div>
                                                <!-- End post_comments -->
                                				<div class="col-md-12" style="margin-top: 20px;">
                                    				<a href="#blog" class="readmore"><i class="glyphicon glyphicon-chevron-left"></i>所有视频</a>
                                				</div>
                                				<div class="clear"></div>
                                            <!-- one more /div?-->
                                            </div>
                        				</article>
                    				</div>
                    				<div class="clear"></div>
                				</div>
            												</section>
            												<!-- End Page Blog - Post 1 -->
        												</div>
    												</div>
												</div>
                                            </div>
                                            <!-- End .blog -->

                                            <!-- .contact -->
                                            <div id="contact" class="content_2">                                                
                                        		<h1 class="h-bloc">上传视频</h1>
                                        		<div class="row">
                                            		<div class="col-lg-12">
                                                		<div class="row" id="contact-user">
                                                <!-- 错位放置 -->         
                                                <!-- /Contact Info -->  
                                             <form id="addVedioFile" enctype="multipart/form-data"> 
                                                <div class="col-md-5">                                                
                                                    <div class="clear"></div>
                                                    <div class="title_content tiltle_contacts" style="float: none;">
                                                        <div class="text_content">选择本地文件</div>
                                                        <div class="clear"></div>
                                                    </div>
                                                    <div class="chooseFile">
                                                        	<input type="file" id="file" name="file" style="display:none" onchange="vedioFileImport(this);"/>
                                                        <a class="download" style="margin:0;float: left;" href="#" id="aVedioFile">
            												<span data-hover="添加视频文件">添加视频文件</span>
        												</a><br/>
        												 
                                                        <script>
        												//点击导入按钮,使files触发点击事件,然后完成读取文件的操作
        												$("#aVedioFile").click(function () {
            												$("#file").click();
        												});
        												function vedioFileImport(node) {
        													$('#em').text($('#file').val());
        												}
    													</script>                                              
                                                        <div class="clear"></div>
                                                    </div> 
                                                    <div class="filePath">
                                                        <p id="em" class="filePath_content">未添加视频文件</p>
                                                    </div>
                                                                                 
                                                </div>
                                                <div class="col-md-7">
                                                    <!-- Contact Form -->
                                                    <div class="title_content" style="float: none;">
                                                        <div class="text_content">视频信息</div>
                                                        <div class="clear"></div>
                                                    </div>

                                                    <div class="contact-form">                                                     
                                                        <div id="contact-status"></div>
                                                        	<p class="form-group" id="contact-name">
                                                            	<label for="name">视频名称</label>
                                                                <input type="text" name="name" id="videoTitle" class="form-control name-contact" id="inputSuccess" placeholder="名称" />
                             
                                                            </p>
                                                            <span id="title.info" style="color:red"></span>
                                                            <p class="form-group" id="contact-email"> 
                                                                <label for="email">视频类型</label>
                                                                <select name="type" class="form-control name-contact">
																	<option value="1">生活视频</option>
																</select>
                                                            </p>
                                                            <p class="form-group" id="contact-message">
                                                                <label for="message">视频描述</label>
                                                                <textarea name="message" cols="88" rows="6" class="form-control message-contact" id="inputError" placeholder="描述"></textarea>
                                                            </p>
                                                            
                                                            <!-- <input type="submit" name="submit" value="SEND MESSAGE" class="submit">-->
                                                            <button type="button" class="btn" id="addVedioInfo"><i></i> 确定</button>
                                    						<button type="button" class="btn"><i></i> 取消</button>
                                                        <script>
                                                        $("#videoTitle").blur(function (){
                                                			var title = $(this).val();
                                                			$.ajax({
                                                				type:'post',
                                                				url:'checkTitleExist',
                                                				dataType:'json',
                                                				data:{'title':title},
                                                				success: function(data){
                                                					if(data.setNumber != "0"){
                                                						
                                                						$("#title\\.info").html("该视频名已存在,请更换视频名称");
                                                						return;
                                                					}else{
                                                						$("#title\\.info").html("");
                                                						
                                                					}
                                                				}
                                                			});
                                                	    });
                                                        </script>
                                                        <script>
														$("#addVedioInfo").click(function () {
														
															  //var userID = document.getElementById("userID").innerHTML;
															  var title = $('#addVedioFile').serializeArray()[0].value;
															  var categoryID = $('#addVedioFile').serializeArray()[1].value;
															  //var setNumber = $('#addVedioFile').serializeArray()[2].value;
															  var description = $('#addVedioFile').serializeArray()[2].value;
															 
															  var userID = document.getElementById("userID").innerHTML;
																$.ajaxFileUpload({ 
														          method:"POST",
														          url:"uploadVideo?userID="+ userID + "&title=" 
														        		  + title + "&categoryID=" + categoryID + "&setNumber=" + "1" + "&description=" + description ,            //需要链接到服务器地址  
														          secureuri:true,  
														          fileElementId:'file',                        //文件选择框的id属性 
														          dataType: 'JSON', 
														          data: $('#addVedioFile').serializeArray(),
														          success: function(data){
														          	alert("上传成功");
														          	$('#addVedioFile')[0].reset();
														          	$('#em').text("");
														    
														          },error: function (data){
														          	alert("上传失败");
														          }
														      });
        												})
														</script>
                                                    </div><!-- End Contact Form -->                                                    
                                                </div><!-- End col-md-7 -->
                                                </form>
                                                
                                                		</div>
                                            		</div>  
												</div>                                            
                                            </div><!-- End .contact -->
                                            
                                        </div><!-- End #resp-tabs-container --> 
                                        
                                    </div><!-- End verticalTab -->

                                </div><!-- End flexy_content -->

                            </div><!-- End row -->

                        </div><!-- End col-md-12 -->

                    </div><!-- End row -->

                </div><!-- End container -->

            </section>
            <!-- End Content -->

        </div>
        <!-- End wrapper -->		
        <!-- 个人主页拼接部分结束 -->    

		</div>
        </div>
		<div class="clearfix"> </div>
		<div class="drop-menu">
			<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
		  		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
		  		<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
		  		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
			</ul>
		</div>
    	<div class="change-wrapper">
			<div class="change">
				<form id="updateUserForm">
					<div class="form-group">
						<input class="modifyUserInfo" type="text" placeholder="修改用户名"  name="user_Name" id="user_Name">
					</div> <!-- end .form-group -->
					
					<div class="form-group">
						<input class="modifyUserInfo" type="password" placeholder="修改密码" name="password" id="password" >
					</div> <!-- end .form-group -->
 
                    <div class="form-group">
						<input class="modifyUserInfo" type="text" placeholder="修改邮箱" name="Email" id="Email" >
					</div> <!-- end .form-group -->
                    
                    <div class="form-group">
						<input class="modifyUserInfo" type="text" placeholder="修改手机号"  name="prefer" id="phoneNum">
					</div> <!-- end .form-group -->
					
					<div class="button-wrapper"><button type="button" class="button" id="Savebutton" onclick="modifyinfo()">保存修改</button></div>
                    <div class="button-wrapper"><button type="button" class="button" id="Giveupbutton">放弃修改</button></div>
				</form>
			</div> <!-- end .login -->
		</div> <!-- end .login-wrapper -->

        <!-- jquery | jQuery 1.11.0 -->
        <!-- Credits: http://jquery.com -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
 		
        <!-- Js | bootstrap -->
        <!-- Credits: http://getbootstrap.com/ -->
        <script type="text/javascript" src="js/bootstrap.min.js"></script> 
        
        <!-- Js | jquery.cycle -->
        <!-- Credits: https://github.com/malsup/cycle2 -->
        <script type="text/javascript" src="js/jquery.cycle2.min.js"></script>
        
        <!-- jquery | rotate and portfolio -->
        <!-- Credits: http://jquery.com -->
        <script type="text/javascript" src="js/jquery.mixitup.min.js"></script> 
        <script type="text/javascript" src="js/HeadImage.js"></script>

        <!-- Js | easyResponsiveTabs -->
        <!-- Credits: http://webtrendset.com/demo/easy-responsive-tabs/Index.html -->
        <script type="text/javascript" src="js/easyResponsiveTabs.min.js"></script> 

        <!-- Js | jquery.cookie -->
        <!-- Credits: https://github.com/carhartl/jquery-cookie --> 
        <script type="text/javascript" src="js/jsSwitcher/jquery.cookie.js"></script>	

        <!-- Js | switcher -->
        <!-- Credits: http://themeforest.net/user/FlexyCodes -->
        <script type="text/javascript" src="js/jsSwitcher/switcher.js"></script>	

        <!-- Js | mCustomScrollbar -->
        <!-- Credits: http://manos.malihu.gr/jquery-custom-content-scroller -->
        <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script>		

        <!-- jquery | prettyPhoto -->
        <!-- Credits: http://www.no-margin-for-errors.com/ -->
        <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
        
        <!-- Js | gmaps -->
        <!-- Credits: http://maps.google.com/maps/api/js?sensor=true-->
        
        <script type="text/javascript" src="js/gmaps.min.js"></script>
        <script type="text/javascript" src="js/jquery.form.js"></script>
        <script type="text/javascript" src="js/ajaxfileupload.js"></script>

 		<!-- Js | Js -->
        <!-- Credits: http://themeforest.net/user/FlexyCodes -->
        <script type="text/javascript" src="js/main.js"></script>
        
        
        <script>
        	/*==========  修改个人信息:前端界面控制  ==========*/
			$('.userchange').on('click', function(event) {
				event.preventDefault();
				$('.change-wrapper').addClass('open');
			});
			$('#Giveupbutton').on('click', function(event) {
				event.preventDefault();
				$('.change-wrapper').removeClass('open');
			});
			$('#Savebutton').on('click', function(event) {
				event.preventDefault();
				$('.change-wrapper').removeClass('open');
			});
           
		</script>
        
        
         <span id="userID" hidden>${sessionScope.user.userID}</span>
        <script type="text/javascript">
			/*==========  修改个人信息:更新页面数据  ==========*/
			/*==========  测试数据  ==========*/
			$('.userchange').on('click', function(event) {
				event.preventDefault();
				$('.change-wrapper').addClass('open');
			});
			$('#Giveupbutton').on('click', function(event) {
				event.preventDefault();
				$('.change-wrapper').removeClass('open');
			});
			$('#Savebutton').on('click', function(event) {
				event.preventDefault();
				$('.change-wrapper').removeClass('open');
			});
           
		</script>
        <span id="oldname" hidden>${sessionScope.user.name}</span>
        	<script type="text/javascript" src="md5.js"></script>
       <script type="text/javascript">
								function modifyinfo(){
									
									var Oldname = document.getElementById("oldname").innerHTML;
									
									var name = document.getElementById("user_Name").value;
									var password =  hex_md5(document.getElementById("password").value);
									var phoneNum = document.getElementById("phoneNum").value;
									var email = document.getElementById("Email").value;
									
									
								
									$.ajax({
										type:'post',
										dataType:'json',
										url:'modifyInfo',
										data:{
											'Oldname':Oldname,
											'name':name,
											'password':password,
											'phoneNum':phoneNum,
											'email':email
											},
										success:function(data){
											$("#titleUserName").text(data.name);
											$("#userName").text(data.name);
											$("#userPhoneNum").text(data.phoneNum);
											$("#userEmail").text(data.email);
											//window.location.reload(); // 点击确定后刷新页面
										},
										error:function(){
										alert("faliure");
										}
										
									});
								}
	</script>
		        <script type="text/javascript">
			/*==========  加载评论信息  ==========*/
			/*==========  测试数据  ==========*/
			var selfUserData = {"userID":1,"name":"陈慧羽","pwd":66666666,"phoneNum":18689716076,"email":"969508193@qq.com",
			                    "header":'images/img/left.png'};
			
			var othersUserData = [{"userID":2,"name":"刘婷","pwd":66666666,"phoneNum":18688888888,"email":"969508193@qq.com",
			                    	  "header":'images/img/front.png'},
									 {"userID":3,"name":"陈毛毛","pwd":66666666,"phoneNum":18688888888,"email":"969508193@qq.com",
			                    	  "header":'images/img/right.png'}]
			var selfCommentData = [
				{"commentID":1,"commentUserID":1,"commentVedioID":'0700201',"context":"好棒","commentTime":"2018-03-05 14:33:28","addCommentID":null},
				{"commentID":2,"commentUserID":1,"commentVedioID":'0700202',"context":"好棒","commentTime":"2018-03-05 14:33:28","addCommentID":null},
				{"commentID":5,"commentUserID":1,"commentVedioID":null,"context":"好棒","commentTime":"2018-03-05 14:33:28","addCommentID":3},
				{"commentID":6,"commentUserID":1,"commentVedioID":null,"context":"好棒","commentTime":"2018-03-05 14:33:28","addCommentID":4}]
			var othersCommentData = [
				{"commentID":3,"commentUserID":2,"commentVedioID":'0700203',"context":"好棒","commentTime":"2018-03-05 14:33:28","addCommentID":null},
				{"commentID":4,"commentUserID":3,"commentVedioID":'0700204',"context":"好棒","commentTime":"2018-03-05 14:33:28","addCommentID":null}]
			var commentVedioData = [
			    {"vedioID":'0700201',"title":'老男孩',"description":'都市剧情',"totalTime":'01:55:00',"uploadTime":'2018-03-05 14:33:28',"size":30,
				 "authorID":2,"categoryID":2,"clickCount":3,"recommentCount":4,"extendName":'map4',
				 "filePath":'/Users/llx/Downloads/视频/电视剧/老男孩.mp4',"cover":'images/1.png'},
				{"vedioID":'0700202',"title":'你好旧时光',"description":'都市剧情',"totalTime":'01:55:00',"uploadTime":'2018-03-05 14:33:28',"size":40,
				 "authorID":2,"categoryID":2,"clickCount":3,"recommentCount":4,"extendName":'map4',
				 "filePath":'/Users/llx/Downloads/视频/电视剧/你好旧时光.mp4',"cover":'images/1.png'},
				 {"vedioID":'0700203',"title":'舌尖上的中国',"description":'美食',"totalTime":'01:55:00',"uploadTime":'2018-03-05 14:33:28',"size":50,
				 "authorID":2,"categoryID":3,"clickCount":3,"recommentCount":4,"extendName":'map4',
				 "filePath":'/Users/llx/Downloads/视频/美食节目/舌尖上的中国.mp4',"cover":'images/1.png'},
				 {"vedioID":'0700204',"title":'风起长林',"description":'古装',"totalTime":'01:55:00',"uploadTime":'2018-03-05 14:33:28',"size":45,
				 "authorID":2,"categoryID":4,"clickCount":3,"recommentCount":4,"extendName":'map4',
				 "filePath":'/Users/llx/Downloads/视频/电视剧/琅琊榜之风起长林.mp4',"cover":'images/1.png'}]
			var commentCategoryData = [{"categoryID":2,"categoryName":'电视剧'},
			                		   {"categoryID":3,"categoryName":'美食'},
							           {"categoryID":4,"categoryName":'古装'}]
			//这里是添加评论方法！！！
			$("#commentIcon").click(function(){
				$("#comments").empty(); 
				var userID = document.getElementById("userID").innerHTML;
						
						$.ajax({
							type:'post',
							dataType:'json',
							url:'showPersonComments',
							data:{
								'userID':userID
								},
							success:function(data){
								var array2 = new Array();
								$.each(data,function(i,val){
									  array2.push(val);
									  });
								var q7 = array2.pop();
								var q6 = array2.pop()    //othercomment
								var q5 = array2.pop();   //category
								var q4 = array2.pop();   //video
								var q3 = array2.pop();   //otheruser
								var q2 = array2.pop();    //selfuser
								var q1 = array2.pop();   //selfcomment
								var count1,count2,count3,count4,count5,count6,count7 = 0;
								
								var count7 = Object.keys(q7).length;
								  console.log(count7);
								 var count6 = Object.keys(q6).length;
								  console.log(count6);
								 var count5 = Object.keys(q5).length;
								  console.log(count5);
								 var count4 = Object.keys(q4).length;
								  console.log(count4);
								 var count3 = Object.keys(q3).length;
								  console.log(count3);
								 var count2 = Object.keys(q2).length;
								  console.log(count2);
								 var count1 = Object.keys(q1).length;
								  console.log(count1);
								  addUserComment(q1,q7,q5,q6,q2,q3,q4,count1,count3,count5,count6,count7,count4);
								//window.location.reload(); // 点击确定后刷新页面
							},
							error:function(){
							alert("faliure");
							}
							
						});
				
			});
			 //添加一条发布评论
			function addUserComment(selfCommentData,othersCommentData,commentVedioData,commentCategoryData,selfUserData,othersUserData,videoAuthorData,count1,count3,count5,count6,count7,count4){
				//commentDataSelf按时间排序
				var selfLength = count1;
				var commentHtml = '';
				for(var i=0;i<selfLength;i++){
					if(selfCommentData[i].addCommentID == 0 && selfCommentData[i].commentVideoID != null){
						commentHtml = addVedioComment(selfCommentData[i],i,commentVedioData,commentCategoryData,selfUserData,videoAuthorData,count5,count6,count4);
						$("#comments").append(commentHtml);
						commentHtml = '';
					}
					if(selfCommentData[i].addCommentID != 0){
						commentHtml = addOthersComment(selfCommentData[i],i,othersCommentData,selfUserData,othersUserData,count7,count3);
						$("#comments").append(commentHtml);
						commentHtml = '';
					}
				}
			}
			//评论对象为视频
			function addVedioComment(oneSelfCommentData,index,commentVedioData,commentCategoryData,selfUserData,videoAuthorData,count5,count6,count4){
				var vedioLength = count5;
				var videoAuthorLength = count4;
				var categoryLength = count6;
				var vedioIndex = 0;
				var categoryName = '';
				var vedioAuthorIndex = 0;
				for(var i=0;i<vedioLength;i++){
					if(oneSelfCommentData.commentVideoID == commentVedioData[i].videoID){
						vedioIndex = i;
						break;
					}
				}
				for(var i=0;i<categoryLength;i++){
					if(commentCategoryData[i].categoryID == commentVedioData[i].categoryID){
						categoryName = commentCategoryData[i].categoryName;
					}
				}
				for(var i=0;i<videoAuthorLength;i++){
					if(commentVedioData[vedioIndex].authorID == videoAuthorData[i].videoID)
						{
							vedioAuthorIndex = i;
						}
				}
				var selfCommentHtml = addCommentTitle(index)+addCommentContext(oneSelfCommentData,selfUserData)+
					                  '<div class="col-md-6 commentVedio">'+
					                      '<div class="vedio-grid vedioRecommended-grid">'+
					                      '<a href="playVideo?videoID=' + commentVedioData[vedioIndex].videoID +'">'+
										     '<img src="'+commentVedioData[vedioIndex].cover+'" alt="" width="100%" height="220px"/>'+
										     '</a>'+
										     '<div class="vedio-grid-info vedioRecommended-grid-info">'+
											    '<h5><a href="playVideo?videoID=' + commentVedioData[vedioIndex].videoID +'" class="title">'+commentVedioData[vedioIndex].title+'</a></h5>'+
                                                 '<div class="vedioAuthor"><i class="glyphicon glyphicon-user"></i>'+videoAuthorData[vedioAuthorIndex].name+'</div>'+
                                                 '<h5><a href="playVideo?videoID=' + commentVedioData[vedioIndex].videoID +'" class="category">'+categoryName+'</a></h5>'+  
                                              '</div>'+
                                         '</div>'+ 
                                       '</div>'+
								   '</div>';
				return selfCommentHtml;
			}
			//评论对象为评论（回复）
			function addOthersComment(oneSelfCommentData,index,othersCommentData,selfUserData,othersUserData,count7,count3){
				var othersLength = count7;
				var othersUserLength = count3;
				var othersCommentIndex = 0;
				var othersUserIndex = 0;
				for(var i=0;i<othersLength;i++){
					if(othersCommentData[i].commentID == oneSelfCommentData.addCommentID){
						othersCommentIndex = i;
						//alert(othersCommentIndex);
						break;
					}
				}
				for(var i=0;i<othersUserLength;i++){
					if(othersUserData[i].commentUserID == othersCommentIndex){
						othersUserIndex = i;
						break;
					}
				}
				var selfCommentHtml = addCommentTitle(index)+addCommentContext(oneSelfCommentData,selfUserData)+
					                  '<div class="col-md-6 commentObject">'+
             							   '<ul>'+
                							   '<li class="clearfix">'+
                    								'<img src="'+othersUserData[othersUserIndex].header+
													'" class="img_reference" width="100" height="100" alt="">'+
                    								'<p>'+othersCommentData[othersCommentIndex].context+'</p>'+
                    								'<div style="clear:both"></div>'+
                    								'<div style="margin-top:10px;margin-left:34px">'+
                    								'<span>'+othersUserData[othersUserIndex].name+'</span>'+
                    								'</div>'+
               								   '</li>'+
           								   '</ul>'+
           									   '<div class="commentTime">'+
                								   '<p>'+timeStampToString(othersCommentData[othersCommentIndex].commentTime)+'</p>'+
                                           	   '</div>'+
                                       '</div>'+
								   '</div>';
				return selfCommentHtml;
			}
			//添加评论内容
			function addCommentContext(oneSelfCommentData,selfUserData){
				var commentContextHtml = '<div class="oneComment">'+
    									      '<div class="col-md-6 commentContext" >'+
        		/*删除视频时使用*/							      '<ul>'+
            									      '<li class="clearfix">'+
                									      '<img src="'+selfUserData.header+'" class="img_reference" width="100" height="100" alt="">'+
                										  '<p>'+oneSelfCommentData.context+'</p>'+
                										  '<div style="clear:both"></div>'+
                          								'<div style="margin-top:10px;margin-left:34px">'+
                										  '<span>'+selfUserData.name+'</span>'+
                										  '</div>'+
            									      '</li>'+
        										  '</ul>'+
                                          	  '<div class="commentTime">'+
            									      '<p>'+timeStampToString(oneSelfCommentData.commentTime)+'</p>'+
        								          '</div>'+
                                              '</div>';
				return commentContextHtml;
			}
			function addCommentTitle(index){
				var commentIndex = index+1;
				var commentTitleHtml = '<div class="title_content" style="margin-bottom:5px">'+
										     '<div class="text_content">评论'+commentIndex+'</div>'+
                						 	 '<div class="clear"></div>'+
								   		 '</div>';
				return commentTitleHtml;
			}
		</script>
        
       <script type="text/javascript">
			/*==========  收藏夹 ==========*/
			/*==========  测试数据  ==========*/
			 /*	var favouriteData = [{"favouriteID":1,"favouriteUserID":1,"favouriteVedioID":'0600101',"favouriteTime":'2018-03-05 16:03:04'},
			            q3       {"favouriteID":2,"favouriteUserID":1,"favouriteVedioID":'0600102',"favouriteTime":'2018-03-05 16:03:05'},
								 {"favouriteID":3,"favouriteUserID":1,"favouriteVedioID":'0600103',"favouriteTime":'2018-03-05 16:03:06'},
								 {"favouriteID":4,"favouriteUserID":1,"favouriteVedioID":'0600104',"favouriteTime":'2018-03-05 16:03:07'},
								 {"favouriteID":5,"favouriteUserID":1,"favouriteVedioID":'0600105',"favouriteTime":'2018-03-05 16:03:15'},
								 {"favouriteID":6,"favouriteUserID":1,"favouriteVedioID":'0600106',"favouriteTime":'2018-03-05 16:03:16'},]
			var favouriteVedioData = [
			    {"vedioID":'0600101',"title":'老男孩',"description":'都市剧情',"totalTime":'01:55:00',"uploadTime":'2018-03-05 14:33:28',"size":30,
				 "authorID":2,"categoryID":2,"clickCount":3,"recommentCount":4,"extendName":'map4',
				 "filePath":'/Users/llx/Downloads/视频/电视剧/老男孩.mp4',"cover":'images/vedioCover/10631521376990243.jpg'},
				 
				{"vedioID":'0600102',"title":'你好旧时光',"description":'都市剧情',"totalTime":'01:55:00',"uploadTime":'2018-03-05 14:33:28',"size":40,
		q2	 "authorID":2,"categoryID":2,"clickCount":3,"recommentCount":4,"extendName":'map4',
				 "filePath":'/Users/llx/Downloads/视频/电视剧/你好旧时光.mp4',"cover":'images/vedioCover/8341521376677306.jpg'},
				 
				 {"vedioID":'0600103',"title":'舌尖上的中国',"description":'美食',"totalTime":'01:55:00',"uploadTime":'2018-03-05 14:33:28',"size":50,
				 "authorID":3,"categoryID":3,"clickCount":3,"recommentCount":4,"extendName":'map4',
				 "filePath":'/Users/llx/Downloads/视频/美食节目/舌尖上的中国.mp4',"cover":'images/vedioCover/27121521376537377.jpg'},
				 
				 {"vedioID":'0600104',"title":'风起长林',"description":'古装',"totalTime":'01:55:00',"uploadTime":'2018-03-05 14:33:28',"size":45,
				 "authorID":4,"categoryID":4,"clickCount":3,"recommentCount":4,"extendName":'map4',
				 "filePath":'/Users/llx/Downloads/视频/电视剧/琅琊榜之风起长林.mp4',"cover":'images/vedioCover/65631521377704488.jpg'},
				 
				 {"vedioID":'0600105',"title":'偶像练习生',"description":'综艺',"totalTime":'01:55:00',"uploadTime":'2018-03-05 14:33:28',"size":45,
				 "authorID":5,"categoryID":5,"clickCount":3,"recommentCount":4,"extendName":'map4',
				 "filePath":'/Users/llx/Downloads/视频/综艺/偶像练习生.mp4',"cover":'images/vedioCover/72671521374968680.jpg'},
				 
				 {"vedioID":'0600106',"title":'爸爸去哪儿',"description":'综艺',"totalTime":'01:55:00',"uploadTime":'2018-03-05 14:33:28',"size":45,
				 "authorID":5,"categoryID":5,"clickCount":3,"recommentCount":4,"extendName":'map4',
				 "filePath":'/Users/llx/Downloads/视频/综艺/爸爸去哪儿.mp4',"cover":'images/vedioCover/78541521376801839.jpg'}]*/
			/*var favouriteCategoryData = [{"categoryID":2,"categoryName":'电视剧'},
			                	{"categoryID":3,"categoryName":'美食'},
								{"categoryID":4,"categoryName":'古装'},
								{"categoryID":5,"categoryName":'综艺'}]*/
		/*	var vedioUserData = [{"userID":2,"name":"刘婷","pwd":66666666,"phoneNum":18688888888,"email":"969508193@qq.com",
			                    	  "header":'images/img/front.png'},
					q4			 {"userID":3,"name":"陈毛毛","pwd":66666666,"phoneNum":18688888888,"email":"969508193@qq.com",
			                    	  "header":'images/img/right.png'},
								 {"userID":4,"name":"陈蛋卷","pwd":66666666,"phoneNum":18688888888,"email":"969508193@qq.com",
			                    	  "header":'images/img/right.png'},
								 {"userID":5,"name":"农农","pwd":66666666,"phoneNum":18688888888,"email":"969508193@qq.com",
			                    	  "header":'images/img/right.png'}]*/
			//点击收藏夹侧边栏
			$("#favouriteIcon").click(function(){
				
				$("#portfoliolist").empty(); 
				var userID = document.getElementById("userID").innerHTML;
						
						$.ajax({
							type:'post',
							dataType:'json',
							url:'showFavourite',
							data:{
								'userID':userID
								},
							success:function(data){
								var array = new Array();
								$.each(data,function(i,val){
									  array.push(val);
									  });
								var q4 = array.pop();
								var q3 = array.pop();
								var q2 = array.pop();
								var q1 = array.pop();
								var count1,count2,count3,count4 = 0;
								 var count4 = Object.keys(q4).length;
								  console.log(count4);
								 var count3 = Object.keys(q3).length;
								  console.log(count3);
								 var count2 = Object.keys(q2).length;
								  console.log(count2);
								 var count1 = Object.keys(q1).length;
								  console.log(count1);
								addUserFavourite(q3,q2,q1,q4,count1,count2,count3,count4);
								//window.location.reload(); // 点击确定后刷新页面
							},
							error:function(){
							alert("faliure");
							}
							
						});
				
				
			});
			function addUserFavourite(favouriteData,favouriteVedioData,favouriteCategoryData,vedioUserData,count1,count2,count3,count4){
				var favouriteLength = count3;
				var favouriteHtml = '';
				for(var i=0;i<favouriteLength;i++){
					console.log(favouriteData[i]);
					favouriteHtml = addOneFavourite(favouriteData[i],i,favouriteVedioData,favouriteCategoryData,vedioUserData,count1,count2,count4);
					$("#portfoliolist").append(favouriteHtml);
					var filterList = {
		        			init: function() {
		            			// MixItUp plugin
		            			// http://mixitup.io
		            			$('#portfoliolist').mixitup({
		                			targetSelector: '.portfolio',
		                			filterSelector: '.filter',
		                			effects: ['fade'],
		                			easing: 'snap',
		                			// call the hover effect
		                			onMixEnd: filterList.hoverEffect()
		           				});
		        			},
		        			hoverEffect: function() {
		            			// Simple parallax effect
		            			$('#portfoliolist .portfolio').hover(
		                    		function() {
		                        		$(this).find('.label').stop().animate({bottom: 0}, 200);
		                        		$(this).find('img').stop().animate({top: -30}, 500);
		                    		},
		                    		function() {
		                        		$(this).find('.label').stop().animate({bottom: -18}, 200);
		                        		$(this).find('img').stop().animate({top: 0}, 300);
		                    		}
		            			);
		       		 		}
		    			};

		    			// Run the show!
		    			filterList.init();
					favouriteHtml = '';
				}
			}
			function addOneFavourite(oneFavouriteData,favouriteIndex,favouriteVedioData,favouriteCategoryData,vedioUserData,count1,count2,count4){
				var vedioLength = count2;
				var categoryLength = count1;
				var vedioUserLength = count4;
				var vedioIndex = 0;
				var categoryName = '';
				var categoryIndex = 0;
				var vedioUserName = '';
				for(var i=0;i<vedioLength;i++){
					if(favouriteVedioData[i].videoID == oneFavouriteData.favouriteVedioID){
						vedioIndex = i;
					}
				}
		
				for(var i=0;i<categoryLength;i++){
					if(favouriteCategoryData[i].categoryID == favouriteVedioData[vedioIndex].categoryID){
						categoryName = favouriteCategoryData[i].categoryName;
						categoryIndex = i;
					}
				}
				for(var i=0;i<vedioUserLength;i++){
					if(vedioUserData[i].userID == favouriteVedioData[vedioIndex].authorID){
						vedioUserName = vedioUserData[i].name;
						//alert(vedioUserName);
					}
				}
		
				var favouriteHtml = '<div class="portfolio '+favouriteCategoryData[categoryIndex].categoryID+'" data-cat="'+favouriteCategoryData[categoryIndex].categoryID+'">'+	
                                        '<div class="portfolio-wrapper">'+		
                                            '<a href="playVideo?videoID=' + favouriteVedioData[vedioIndex].videoID + '"rel="portfolio" title="">'+
                                                '<img src="'+favouriteVedioData[vedioIndex].cover+'" alt="Visual Infography"/>'+
                                                '<div class="label">'+
                                                    '<div class="label-text">'+
                                                        '<a class="text-title">'+favouriteVedioData[vedioIndex].title+'</a>'+
                                                        '<span class="text-category">'+vedioUserName+'</span>'+
                                                    '</div>'+
                                                     '<div class="label-bg"></div>'+
                                                '</div>'+
                                            '</a>'+
                                        '</div>'+
                                     '</div>';
				return favouriteHtml;
			}	
		</script>
		
       
        <script type="text/javascript">
	
			/*==========  个人视频 ==========*/
			/*==========  测试数据  ==========*/
			/*var vedioData = [
			    {"vedioID":'0600101',"title":'老男孩',"description":'都市剧情',"totalTime":'01:55:00',"uploadTime":'2018-03-07 14:33:28',"size":30,
				 "authorID":1,"categoryID":2,"clickCount":3,"recommentCount":4,"extendName":'map4',
				 "filePath":'/Users/llx/Downloads/视频/电视剧/老男孩.mp4',"cover":'images/vedioCover/10631521376990243.jpg'},

				 {"vedioID":'0600102',"title":'舌尖上的中国',"description":'美食',"totalTime":'01:55:00',"uploadTime":'2018-03-05 14:33:28',"size":50,
				 "authorID":1,"categoryID":3,"clickCount":5,"recommentCount":6,"extendName":'map4',
				 "filePath":'/Users/llx/Downloads/视频/美食节目/舌尖上的中国.mp4',"cover":'images/vedioCover/27121521376537377.jpg'},
				 
				 {"vedioID":'0600103',"title":'风起长林',"description":'古装',"totalTime":'01:55:00',"uploadTime":'2018-03-05 14:33:28',"size":45,
				 "authorID":1,"categoryID":4,"clickCount":7,"recommentCount":8,"extendName":'map4',
				 "filePath":'/Users/llx/Downloads/视频/电视剧/琅琊榜之风起长林.mp4',"cover":'images/vedioCover/65631521377704488.jpg'},
				
				 {"vedioID":'0600104',"title":'爸爸去哪儿',"description":'综艺',"totalTime":'01:55:00',"uploadTime":'2018-03-05 14:33:28',"size":45,
				 "authorID":1,"categoryID":5,"clickCount":9,"recommentCount":9,"extendName":'map4',
				 "filePath":'/Users/llx/Downloads/视频/综艺/爸爸去哪儿.mp4',"cover":'images/vedioCover/78541521376801839.jpg'}]
		  	var vedioCommentUserData = [{"userID":1,"name":"刘婷","pwd":66666666,"phoneNum":18688888888,"email":"969508193@qq.com",
			                    	  "header":'images/img/front.png'},
								 {"userID":2,"name":"陈毛毛","pwd":66666666,"phoneNum":18688888888,"email":"969508193@qq.com",
			                    	  "header":'images/img/right.png'},
								 {"userID":3,"name":"陈蛋卷","pwd":66666666,"phoneNum":18688888888,"email":"969508193@qq.com",
			                    	  "header":'images/img/left.png'},
								 {"userID":4,"name":"农农","pwd":66666666,"phoneNum":18688888888,"email":"969508193@qq.com",
			                    	  "header":'images/img/right.png'}]
			var categoryData = [{"categoryID":2,"categoryName":'电视剧'},
			                	{"categoryID":3,"categoryName":'美食'},
								{"categoryID":4,"categoryName":'古装'},
								{"categoryID":5,"categoryName":'综艺'}]
			var vedioCommentData = [
				{"commentID":1,"commentUserID":1,"commentVedioID":'0600101',"context":"好棒啊","commentTime":"2018-03-05 14:33:28","addCommentID":null},
				{"commentID":2,"commentUserID":2,"commentVedioID":'0600102',"context":"好美","commentTime":"2018-04-05 14:33:28","addCommentID":null},
				{"commentID":3,"commentUserID":3,"commentVedioID":'0600102',"context":"很棒","commentTime":"2018-05-05 14:33:28","addCommentID":null},
				{"commentID":4,"commentUserID":1,"commentVedioID":'0600103',"context":"好好好","commentTime":"2018-05-17 14:33:28","addCommentID":null},
				{"commentID":5,"commentUserID":4,"commentVedioID":'0600103',"context":"很好","commentTime":"2018-06-08 14:33:28","addCommentID":null},
				{"commentID":6,"commentUserID":2,"commentVedioID":'0600104',"context":"好棒","commentTime":"2018-09-30 14:33:28","addCommentID":null},
				{"commentID":7,"commentUserID":3,"commentVedioID":'0600104',"context":"好棒","commentTime":"2018-10-05 14:33:28","addCommentID":null},
				{"commentID":8,"commentUserID":3,"commentVedioID":'0600104',"context":"好棒","commentTime":"2018-11-05 14:33:28","addCommentID":null}]
			var commentCount = [1,2,3,4,5]*/
			$("#vedioIcon").click(function(){
				
				var userID = document.getElementById("userID").innerHTML;
				
				$.ajax({
					type:'post',
					dataType:'json',
					url:'showPersonVideo',
					data:{
						'userID':userID
						},
					success:function(data){
						
						var array1 = new Array();
						$.each(data,function(j,value){
							  array1.push(value);
							  });
						var j4 = array1.pop(); //video
						var j3 = array1.pop();//count
						var j2 = array1.pop();//category
						var j1 = array1.pop();//comment
						var j5 = array1.pop();//user
						 
						

						var count1,count2,count3,count4,count5 = 0;
						 var count4 = Object.keys(j4).length;
						  console.log(count4);
						 var count3 = Object.keys(j3).length;
						  console.log(count3);
						 var count2 = Object.keys(j2).length;
						  console.log(count2);
						 var count1 = Object.keys(j1).length;
						  console.log(count1);
						  var count5 = Object.keys(j5).length;
						  console.log(count5);
						  j3=JSON.stringify(j3);
						  
						  $(".vediosSection").empty();
							addVedio(j4,j2,j3,count2,count4);
							$("#vedioDiv").empty();
							addVedioDecription(j4,j2,j3,j5,j1,count1,count2,count4,count5);
						//window.location.reload(); // 点击确定后刷新页面
					},
					error:function(){
					alert("faliure");
					}
					
				});
				
			});
				
			function addVedio(vedioData,categoryData,commentCount,count2,count4){
				var vedioLength = count4;
				var vedioHtml = '';
				for(var i=0;i<vedioLength;i++){
					var j = 1;
					vedioHtml = addOneVedio(vedioData[i],i,j,categoryData,commentCount,count2);
					$(".vediosSection").append(vedioHtml);
					vedioHtml = '';
					j=j+2;
				}
				$('a.read_m').click(function() {
        			var pagina = $(this).attr('href');
        			var postdetail = pagina + '-page';
        			if (pagina.indexOf("#post-") != -1) {
           			$('#blog-page').hide();
            		$(postdetail).show();
            		$(".tabs-blog").trigger('click');
        			}
        			return false;
				});	
				// More blog
    			$('a.read_more').click(function() {
        			var pagina = $(this).attr('href');
        			var postdetail = pagina + '-page';
        			if (pagina.indexOf("#post-") != -1) {
            			$('#blog-page').hide();
            			$(postdetail).show();
            			$(".tabs-blog").trigger('click');
        			}
        		return false;
    			});

    			//pagination All
    			$('.content-post a').click(function() {
        			var pagina = $(this).attr('href');
        			if (pagina == "#blog") {
           			$('.content-post').hide();
            		$('#blog-page').show();
            		$(".tabs-blog").trigger('click');
        			}
        			return false;
    			});

    			//pagination blog
    			$('.content-post #pagination').click(function() {
			    	var pagina = $(this).attr('href');
        			var postdetail = pagina + '-page';

        			if (pagina.indexOf("#post-") != -1) {
            			$('#blog-page').hide();
            			$('.content-post').hide();
            			$(postdetail).show();
            			$(".tabs-blog").trigger('click');
        			}
        			return false;
    			});
				
			}
			function addOneVedio(oneVedioData,index,j,categoryData,commentCount,count2){
				
				var categoryLength = count2;
				var categoryName = '';
				var vedioPage = index+1;
				for(var i=0;i<categoryLength;i++){
					if(categoryData[i].categoryID == oneVedioData.categoryID){
						categoryName = categoryData[i].categoryName;
						categoryIndex = i;
					}
				}
				//var vedioTime = oneVedioData.uploadTime;
				var time = oneVedioData.uploadTime;
				
				var vedioHtml = '<article id="post-'+vedioPage+'" class="blog-article">'+                    
                    						'<div class="col-md-12">'+
                        						'<div class="row">'+
                            						'<div class="col-md-12 post_media">'+
                               							'<div class="post-format-icon">'+
                                    						'<a href="#" class="item-date"><span>' + vedioPage + '</span></a>'+
                                						'</div>'+
                                						'<div class="media">'+
                                    						'<div class="item active">'+
                                    						'<a href="playVideo?videoID=' + oneVedioData.videoID +'">'+
                                        						'<img src="'+oneVedioData.cover+'" class="img-hover" alt=""  style="height: 500px"/>'+
                                        						'</a>'+
                                    						'</div>'+
															'<div class="vedioUploadTime">发布时间：'+timeStampToString(time)+'</div>'+				
                                						'</div>'+
                            						'</div>'+
                       						 	'</div>'+


                        						'<div class="row">'+
                           							'<div class="col-md-12 post_content">'+
                                						'<div class="content post_format_standart">'+
                                        					'<div class="title_content">'+
                                            					'<div class="text_content" id="vedioTestTitle">'+oneVedioData.title+'</div>'+
                                            						'<div class="clear"></div>'+
                                        						'</div>'+
                                        						'<ul class="info">'+
																'<li><i class="glyphicon glyphicon-play"></i>'+oneVedioData.totalTime+'</li>'+
                                            				'<li><i class="glyphicon glyphicon-comment"></i>'+commentCount[j]+'</li>'+
                                            				'<li><i class="glyphicon glyphicon-heart"></i>'+oneVedioData.clickCount+'</li>'+
															'<li><i class="glyphicon glyphicon-eye-open"></i>'+oneVedioData.recommentCount+'</li>'+
                                            				'<li><i class="glyphicon glyphicon-align-left"></i>'+categoryName+'</li>'+
                                        						'</ul>'+
                                        						'<div class="blog-content">'+
                                            						'<p><i class="fa fa-quote-left"></i>'+oneVedioData.description+'</p>'+
                                                                '</div>'+
                                    						'</div>'+
                                				'<a href="#post-'+vedioPage+'" class="read_m pull-right">详情<i class="glyphicon glyphicon-chevron-right"></i></a>'+
                            							'</div>'+
                        							'</div>'+
                    							'</div>'+
                							'</article>'+
											'<div class="clear"></div>';
				return vedioHtml;
			}
			function addVedioDecription(vedioData,categoryData,commentCount,vedioCommentUserData,vedioCommentData,count1,count2,count4,count5){
				
				var vedioLength = count4;
				var vedioDecriptionHtml = '';
				var j = 1;
				for(var i=0;i<vedioLength;i++){
					vedioDecriptionHtml = addOneVedioDecription(vedioData[i],j,i,categoryData,commentCount,vedioCommentUserData,vedioCommentData,count1,count2,count4,count5);
					$(".vediosSection").after(vedioDecriptionHtml);
					j = j+2;
					vedioDecriptionHtml = '';
				}
				$('a.read_m').click(function() {
        			var pagina = $(this).attr('href');
        			var postdetail = pagina + '-page';
        			if (pagina.indexOf("#post-") != -1) {
           			$('#blog-page').hide();
            		$(postdetail).show();
            		$(".tabs-blog").trigger('click');
        			}
        			return false;
				});	
				// More blog
    			$('a.read_more').click(function() {
        			var pagina = $(this).attr('href');
        			var postdetail = pagina + '-page';
        			if (pagina.indexOf("#post-") != -1) {
            			$('#blog-page').hide();
            			$(postdetail).show();
            			$(".tabs-blog").trigger('click');
        			}
        		return false;
    			});

    			//pagination All
    			$('.content-post a').click(function() {
        			var pagina = $(this).attr('href');
        			if (pagina == "#blog") {
           			$('.content-post').hide();
            		$('#blog-page').show();
            		$(".tabs-blog").trigger('click');
        			}
        			return false;
    			});

    			//pagination blog
    			$('.content-post #pagination').click(function() {
			    	var pagina = $(this).attr('href');
        			var postdetail = pagina + '-page';

        			if (pagina.indexOf("#post-") != -1) {
            			$('#blog-page').hide();
            			$('.content-post').hide();
            			$(postdetail).show();
            			$(".tabs-blog").trigger('click');
        			}
        			return false;
    			});
			}
			function addOneVedioDecription(oneVedioData,j,index,categoryData,commentCount,vedioCommentUserData,vedioCommentData,count1,count2,count4,count5){
				var categoryLength = count2;
				var categoryName = '';
				var categoryIndex = 0;
				var vedioPage = index+1;
				for(var i=0;i<categoryLength;i++){
					if(categoryData[i].categoryID == oneVedioData.categoryID){
						categoryName = categoryData[i].categoryName;
						categoryIndex = i;
					}
				}
				var wholeVedioTitle = '<div id="vedioDiv">'+
									'<section id="post-'+vedioPage+'-page" class="content-post" style="display: none">'+
	               					  	'<div class="row inner">'+
                    						'<div class="col-md-12" id="oneWholeVedio">'+
                        						'<article class="postPage">'+                                           
                                            		'<div class="row">'+
                            							'<div class="col-md-12 post_media">'+
                               								'<div class="post-format-icon">'+
                                    							'<a href="#" class="item-date"><span class="fa fa-caret-square-o-right"></span></a>'+
                                							'</div>'+
                                							'<div class="media" style="float: right;margin-right:120px">'+
                                    							'<div class="item active" >'+
                                    							'<a href="playVideo?videoID=' + oneVedioData.videoID +'">'+
                                                   					'<img src="'+oneVedioData.cover+'" alt=""/>'+
                                                   					'</a>' + 
                                                				'</div>'+		
                                							'</div>'+
                            							'</div>'+
                       						 		'</div>'+
    
                            						'<div class="title_content">'+
                                						'<div class="text_content">'+oneVedioData.title+'</div>'+
                                						'<div class="clear"></div>'+
                            						'</div>'+
                            						'<p class="caps">'+oneVedioData.description+'</p>'+
						      						'<div class="col-md-12 first">'+
                                					'<div class="info">'+                              
                                    					'<ul class="info-post">'+
                                        					'<li><i class="glyphicon glyphicon-play"></i>'+oneVedioData.totalTime+'</li>'+
                                            				'<li><i class="glyphicon glyphicon-comment"></i>'+commentCount[j]+'</li>'+
                                            				'<li><i class="glyphicon glyphicon-heart"></i>'+oneVedioData.clickCount+'</li>'+
															'<li><i class="glyphicon glyphicon-eye-open"></i>'+oneVedioData.recommentCount+'</li>'+
                                            				'<li><i class="glyphicon glyphicon-align-left"></i>'+categoryName+'</li>'+
                                    					'</ul>'+
                               					 	'</div>'+
                                				 	'<div class="clear"></div>';
				var wholeVedio = wholeVedioTitle + addVedioComments(oneVedioData,index,vedioCommentUserData,vedioCommentData,count1,count4,count5);
				return wholeVedio;

			}
			function addVedioComments(oneVedioData,index,vedioCommentUserData,vedioCommentData,count1,count4,count5){
				var vedioLength = count4;
				var vedioCommentLength = count1;
				var vedioCommentUserLength = count5;
				var vedioCommmentsHtml = '';
				var vedioCommentTitle = '<div class="post_comments">'+
                                    		'<div class="title_content">'+
                                        		'<div class="text_content">视频评论</div>'+
                                        		'<div class="clear"></div>'+
                                    		'</div>'+
                                    		'<div class="clear"></div>'+
                                    		'<div class="comments">';
				for(var i=0;i<vedioCommentLength;i++){
					//alert(vedioCommentData[i].commentVedioID);
					if(vedioCommentData[i].commentVideoID == oneVedioData.videoID){
						
						for(var j=0;j<vedioCommentUserLength;j++){
							
							if(vedioCommentUserData[j].userID == vedioCommentData[i].commentUserID){
								vedioCommmentsHtml = vedioCommmentsHtml+
												'<div class="comment">'+
                                            		'<img src="'+vedioCommentUserData[j].header+'" width="100" height="100" alt="img" />'+
                                            		'<div class="text">'+
                                                		'<div class="name">'+vedioCommentUserData[j].name+'</div>'+
                                                		'<div class="date">'+timeStampToString(vedioCommentData[i].commentTime)+'</div>'+
                                                		vedioCommentData[i].context+
                                            			'</div>'+
                                            	    '<div class="clear"></div>'+
                                        	    '</div>';
							  
							}
						}
						
					}
				}
				var vedioCommmentsTail = 	'</div>'+
										'<div class="clear"></div>'+                                         
                                	  '</div>'+
                                	  '<div class="col-md-12" style="margin-top: 20px;">'+
                                      	'<a href="#blog" class="readmore"><i class="glyphicon glyphicon-chevron-left"></i>所有视频</a>'+
                                	  '</div>'+
                                	  '<div class="clear"></div>'+
                                    '</div>'+
                        		'</article>'+
                    		'</div>'+
                    		'<div class="clear"></div>'+
                		'</div>'+
            		'</section>'+
					'</div>';
				var wholeVedioTail = vedioCommentTitle+vedioCommmentsHtml+vedioCommmentsTail;

				return wholeVedioTail;
			}
		</script>
        
        <!-- code js for image rotate -->
        <script type="text/javascript">

            var mouseX;
            var mouseY;
            var imageOne;

            /* Calling the initialization function */
            $(init);

            /* The images need to re-initialize on load and on resize, or else the areas
             * where each image is displayed will be wrong. */
            $(window).load(init);
            $(window).resize(init);

            /* Setting the mousemove event caller */
            $(window).mousemove(getMousePosition);

            /* This function is called on document ready, on load and on resize
             * and initiallizes all the images */
            function init() {

                /* Instanciate the mouse position variables */
                mouseX = 0;
                mouseY = 0;

                /* Instanciate a HeadImage class for every image */
                imageOne = new HeadImage("one");

            }

            /* This function is called on mouse move and gets the mouse position. 
             * It also calls the HeadImage function to display the correct image*/
            function getMousePosition(event) {

                /* Setting the mouse position variables */
                mouseX = event.pageX;
                mouseY = event.pageY;

                /*Calling the setImageDirection function of the HeadImage class
                 * to display the correct image*/
                imageOne.setImageDirection();

            }

        </script>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
  </body>
</html>